<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>老师列表</title>
</head>
<link href="${pageContext.request.contextPath}/static/core/css/style.css">
<style>
    .modal.fade.in {
        top: 90px;
    }
</style>
<body>

<script>
    $(function () {
        /*调用初始模态框的方法*/
        modelDisiplay()
    })

    <!--删除方法-->
    function remove(id) {
        var flag = confirm("您确认要执行删除操作？");
        if (flag) window.location.href = _baselocation + "/teacher/delete/" + id;
    }

    /**
     * 将修改的班级信息传递到后台并且隐藏模态框
     */
    function update() {
        /*获取form表达之后调用sumbit方法传递数据*/
        $("#update-enrol-form").submit();
        /*隐藏模态框*/
        $('#update-teacher-modal').modal('hide');
    }

    function onUpdateModal(id) {
        /*获取对应id的班级元素就是一行tr*/
        var _Dom = $('[data-teacher-code=' + id + ']');
        /*获取老师名称*/
        var teacherName = _Dom.find(".teacher-name").text();
        /*获取老师Code*/
        var teacherCode = _Dom.find(".teacher-code").text();
        /*获取老师电话*/
        var teacherTelephone = _Dom.find(".teacher-telephone").text();
        /*获取老师入职时间*/
        var teacherStartTime = _Dom.find(".teacher-start-time").text();
        /*获取老师教师工资*/
        var teacherSalary = _Dom.find(".teacher-salary").text();
        /*获取老师教师地址*/
        var teacherAddress = _Dom.find(".teacher-address").text();
        /*获取绑定用户*/
        var teacherUserId = _Dom.find(".teacher-user-id").attr("data-user-id");
        /*在控制台中输出 作用：调试软件*/
        console.log(teacherName + "" + teacherCode + "" + teacherTelephone + "" + teacherStartTime + "" + teacherSalary + "" + teacherAddress + "" + teacherUserId);
        /*设置表单信息*/
        $(".teacher-id").val(id);
        $("[name='teacherCode']").val(teacherCode.trim());
        $("[name='teacherName']").val(teacherName.trim())
        $("[name='telephone']").val(teacherTelephone.trim())
        $("[name='teacherStartTime']").val(teacherStartTime.trim())
        $("[name='teacherSalary']").val(teacherSalary.trim())
        $("[name='teacherAddress']").val(teacherAddress.trim())
        $("[name='userId']").val(teacherUserId.trim())
        /*显示修改模态框*/
        $('#update-teacher-modal').modal('show');
    }

    function addTeacher() {
        window.location.href = _baselocation + "/teacher/add";
    }

    function modelDisiplay() {
        /**
         * 初始化模态框中用户下拉框
         */
        $.ajax({
            url: _baselocation + "/getUser",
            type: 'post',
            contentType: 'application/json; charset=UTF-8',
            data: null,//一定不能给转成json字符串传过去 结果会是这样""201922101411""
            dataType: "json",
            success: function (result) {
                console.log(result)
                if (result != null) {
                    for (var i = 0; i < result.length; i++) {
                        var rol = result[i].role;
                        var rolStr = '';
                        if (rol == 1) {
                            rolStr = '管理员'
                        } else if (rol == 2) {
                            rolStr = '老师'
                        } else if (rol == 3) {
                            rolStr = '学生'
                        } else if (rol == 4) {
                            rolStr = '家长'
                        } else if (rol == 5) {
                            rolStr = '5教务人员'
                        }
                        $(".user-id").append('<option value=' + result[i].id + '>' + result[i].userCode + '   ' + rolStr + '</option>');
                    }
                }
            },
        });
    }

</script>
<!--主容器-->
<div class="row">

    <div class="col-md-12">
        <h1>老师管理</h1>
        <button type="button" class="add-enrol-btn btn btn-warning" onclick="addTeacher()">添加</button>
        <div class="query-content">
            <form class="form-inline" action="${pageContext.request.contextPath}/teacher/query">
                <div class="form-group">
                    <label for="query-content-teacher-code">教师编号</label>
                    <input type="text" class="form-control" id="query-content-teacher-code" name="teacherCode"
                           placeholder="请输入教师编号">
                </div>
                <div class="form-group">
                    <label for="query-content-teacher-name">教师名称</label>
                    <input type="text" class="form-control" id="query-content-teacher-name" name="teacherName"
                           placeholder="请输入教师编号">
                </div>
                <div class="form-group">
                    <label for="query-content-teacher-start-time">入职时间</label>
                    <input type="date" class="form-control" name="teacherStartTime"
                           id="query-content-teacher-start-time">
                </div>

                <button type="submit" class="btn btn-default">搜索</button>
            </form>
        </div>
        <table class="table table-hover table-bordered">
            <!--表头-->
            <thead>
            <th class="info text-center">老师ID</th>
            <th class="info text-center">老师编号</th>
            <th class="info text-center">老师名称</th>
            <th class="info text-center">头像</th>
            <th class="info text-center">电话</th>
            <th class="info text-center">入职时间</th>
            <th class="info text-center">教师工资</th>
            <th class="info text-center">教师地址</th>
            <th class="info text-center">绑定用户</th>
            <th class="info text-center">操作</th>
            </thead>
            <!--表内容-->
            <tbody>
            <c:forEach var="obj" items="${voList}" varStatus="index">
                <tr class="text-center" data-teacher-code="${obj.id}">
                    <td>
                            ${index.count}
                    </td>
                    <td class="teacher-code">
                            ${obj.teacherCode}
                    </td>
                    <td class="teacher-name">
                            ${obj.teacherName}
                    </td>
                    <td class="teacher-img">
                        <img src="/teacher/showPic/${obj.imgSrc}" width="50px">
                    </td>
                    <td class="teacher-telephone">
                            ${obj.telephone}
                    </td>
                    <td class="teacher-start-time">
                        <fmt:formatDate value="${ obj.teacherStartTime }" type="date" dateStyle="default"/>
                    </td>
                    <td class="teacher-salary">
                            ${obj.teacherSalary}
                    </td>
                    <td class="teacher-address">
                            ${obj.teacherAddress}
                    </td>

                    <td class="teacher-user-id" data-user-id="${obj.user.id}">
                            ${obj.user.userCode}
                    </td>

                    <td>
                        <button class="btn btn btn-info" onclick="onUpdateModal(${obj.id})">修改</button>
                        <button class="btn btn btn-danger" onclick="remove(${obj.id})">删除</button>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>

<!--修改模态框-->
<div class="modal fade" id="update-teacher-modal" tabindex="10" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">修改老师信息</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <!--修改区-->
                        <form class="form-horizontal teacher-update-count"
                              action="${pageContext.request.contextPath}/teacher/update" id="update-enrol-form"
                              method="post">
                            <input type="hidden" name="id" class="teacher-id">
                            <div class="form-group">
                                <label for="teacher-code" class="col-sm-2 control-label">教师编号</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="teacherCode" id="teacher-code"
                                           placeholder="请输入教师编号">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="teacher-name" class="col-sm-2 control-label">老师名称</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="teacherName" id="teacher-name"
                                           placeholder="请输入老师名称">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="telephone" class="col-sm-2 control-label">电话</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="telephone" id="telephone"
                                           placeholder="请输入电话">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="teacher-start-time" class="col-sm-2 control-label">入职时间</label>
                                <div class="col-sm-10">
                                    <input type="date" class="form-control" name="teacherStartTime"
                                           id="teacher-start-time">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="teacher-salary" class="col-sm-2 control-label">教师工资</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="teacherSalary" id="teacher-salary"
                                           placeholder="教师工资">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="teacher-address" class="col-sm-2 control-label">教师地址</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="teacherAddress" id="teacher-address"
                                           placeholder="请输入教师地址">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="user-id" class="col-sm-2 control-label">绑定账号</label>
                                <div class="col-sm-10">
                                    <select class="form-control user-id" id="user-id" name="userId">

                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="update()">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

</body>
</html>
